<template>
	<view>
		<liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
		<view v-show="defaultIndex == 0" class="pin_box">
			<view class="box_item" v-for="(item,index) in pinList" @click="getnav(item.goods_id)">
				<image class="left" :src="item.thumb_url"></image>
				<view class="vertical">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="across">
						<view class="price">¥{{item.price}}</view>
						<view class="subBtn">去拼团</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="defaultIndex == 1" class="tuan_box">
			<view class="box_item" v-for="(item,index) in tuanList"  @click="getnav(item.goods_id)">
				<image class="left" :src="item.thumb_url"></image>
				<view class="vertical">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="across">
						<view class="price">¥{{item.price}}</view>
						<view class="subBtn">去看看</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="defaultIndex == 2" class="cu_box">
			<view class="box_item" v-for="(item,index) in cuList"  @click="getnav(item.id)">
				<image class="left" :src="item.thumb_url"></image>
				<view class="vertical">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="across">
						<view class="price">¥{{item.min_price}}</view>
						<view class="subBtn">去看看</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="defaultIndex == 3" class="miao_box">
			<view class="count_box" v-if="miaoList.length!=0">
				剩余时间
				<uni-countdown color="#FFFFFF" background-color="#ff3d3d" border-color="#ff3d3d" :showColon='false' :showDay='false' :hour="time.hour" :minute="time.minute" :second="time.second"></uni-countdown>
				
			</view>
			<view class="box_item" v-for="(item,index) in miaoList"  @click="getnav(item.goods_id)">
				<image class="left" :src="item.thumb_url"></image>
				<view class="vertical">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="across">
						<view class="price">¥{{item.price}}</view>
						<view class="subBtn">抢购中</view>
					</view>
				</view>
			</view>
		</view>
		<view class="none_box" v-if="none">
			<image src="https://dsx.cdzer.net/uploads/bgk.png"></image>
		</view>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import uniCountdown from "@/components/uni-countdown.vue";
	export default {
		data() {
			return {
				tabs:[
					{
						name: '拼团'
					},
					{
						name: '团购'
					},
					{
						name:'促销'
					},
					{
						name: '秒杀'
					}
				],
				defaultIndex: 0,
				pinList:[],
				tuanList:[],
				cuList:[],
				miaoList:[],
				userInfo:{},
				time:{},
				none:false
			}
		},
		created() {
			uni.getStorage({
				key:'userInfo',
				success:res=>{
					this.userInfo = JSON.parse( res.data)
				}
			})
		},
		onLoad(options) {
			this.shopId = options.id
		},
		mounted() {
			uni.showLoading({
				title: '加载中'
			})
			this.getPinlist(1)
		},
		 components: {
		        liuyunoTabs,
				uniCountdown
		    },
		methods: {
			tabClick(e){
				console.log(e)
				this.defaultIndex = e
				let that = this
				this.none = false
				switch(e){
					case 0:
						if(this.pinList.length == 0){
							uni.showLoading({
								title: '加载中'
							})
							that.getPinlist(1)
						}else{
							
						}
						break;
					case 1:
						if(this.tuanList.length == 0){
								console.log(this)
								uni.showLoading({
									title: '加载中'
								})
							this.getTuanList(1)
						}else{
							
						}
						break;
					case 2:
						if(this.cuList.length == 0){
							uni.showLoading({
								title: '加载中'
							})
							that.getCulist(1)
						}else{
							
						}
						break;
					case 3:
						if(this.miaoList.length == 0){
							uni.showLoading({
								title: '加载中'
							})
							that.getMiaoList(1)
						}else{
							
						}
						break;
					
				}
			},
			getnav(id){
				uni.navigateTo({
					url:'/pagesC/homeSon/goodsDetails?id='+id
				})
			},
			getPinlist(page){
				this.$http.getAssembleGoodslst({
					page,
					shop_id:this.shopId
				}).then(res=>{
					this.pinList = this.pinList.concat(res.data)
					if(this.pinList.length == 0){
						this.none = true
					}
					uni.hideLoading()
				}).catch(err=>{
						this.none = true
				})
			},
			getMiaoList(page){
				this.$http.getRushList({
					page,
					shop_id:this.shopId
				}).then(res=>{
					if(res.data.length == 0){
						this.none = true
						return 
					}
					this.miaoList = this.miaoList.concat(res.data.goodslist)
					if(this.miaoList.length == 0){
						this.none = true
					}
					let reduceTime = res.data.end_time - (new Date()).getTime()/1000
					console.log(reduceTime)
					let hour = Math.floor(reduceTime/3600),
						minute = Math.floor((reduceTime - hour *3600) /60),
						second = Math.floor((reduceTime - hour * 60 * 60 - minute * 60))
					let time = {
						hour,
						minute,
						second
						
					}
					this.time = time
					uni.hideLoading()
						// console.log(time)
				}).catch(err=>{
						this.none = true
				})
			},
			getTuanList(page){
				this.$http.groupgoodslist({
					page,
					shop_id:this.shopId
				}).then(res=>{
					this.tuanList = this.tuanList.concat(res.data)
					if(this.tuanList.length == 0){
						this.none = true
					}
					uni.hideLoading()
				}).catch(err=>{
						this.none = true
				})
			},
			getCulist(page){
				this.$http.getprolst({
					page,
					shop_id:this.shopId
				}).then(res=>{
					this.cuList = this.cuList.concat(res.data)
					if(this.cuList.length == 0){
						this.none = true
					}
					uni.hideLoading()
				}).catch(err=>{
						this.none = true
				})
			}
		}
	}
</script>

<style lang="less">  
	.count_box{
		margin: 20rpx 4vw;
	}
	.box_item{
		display: flex;
		height: 200rpx;
		width: 94vw;
		margin: 20rpx 3vw;
		background-color: #fff;
		.left{
			width: 180rpx;
			height: 180rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			margin: 10rpx ;
		}
		.vertical{
			display: flex;
			flex-direction: column;
			padding: 10rpx 10rpx;
			flex: 1;
			justify-content: space-between;
			.goods_name{
				font-size: 30rpx;
				color: #333333;
			}
			.across{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.price{
					font-size: 30rpx;
					color: #333333;
					
				}
				.subBtn{
					width: 140rpx;
					height: 60rpx;
					border-radius: 10rpx;
					border: solid 1rpx #ff3d3d;
					color: #ff3d3d;
					font-size: 30rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}
	.none_box{
		position: fixed;
		left: 15vw;
		width: 70vw;
		top: 25vh;
		height: 30vh;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
